'use client';

import React from 'react';
import { Row, Col, Select, Input, Button, Card } from 'antd';
import { SearchOutlined, ClearOutlined } from '@ant-design/icons';
import { UserFilters as UserFiltersType } from '@/types/user';
import { 
  USER_STATUS_OPTIONS, 
  USER_ROLE_OPTIONS,
  DEPARTMENT_OPTIONS
} from '@/utils/userConstants';

const { Option } = Select;
const { Search } = Input;

interface UserFiltersProps {
  filters: UserFiltersType;
  onFiltersChange: (filters: UserFiltersType) => void;
  loading: boolean;
}

const UserFilters: React.FC<UserFiltersProps> = ({
  filters,
  onFiltersChange,
  loading,
}) => {
  const handleStatusChange = (values: string[]) => {
    onFiltersChange({
      ...filters,
      status: values as any,
    });
  };

  const handleRoleChange = (values: string[]) => {
    onFiltersChange({
      ...filters,
      role: values as any,
    });
  };

  const handleDepartmentChange = (values: string[]) => {
    onFiltersChange({
      ...filters,
      department: values,
    });
  };

  const handleSearchChange = (value: string) => {
    onFiltersChange({
      ...filters,
      search: value || undefined,
    });
  };

  const handleClearFilters = () => {
    onFiltersChange({});
  };

  return (
    <Card style={{ marginBottom: 24 }}>
      <Row gutter={[16, 16]} align="middle">
        <Col xs={24} sm={12} md={6}>
          <div>
            <label style={{ display: 'block', marginBottom: 4, fontWeight: 500 }}>
              状态
            </label>
            <Select
              mode="multiple"
              placeholder="选择状态"
              value={filters.status}
              onChange={handleStatusChange}
              style={{ width: '100%' }}
              disabled={loading}
            >
              {USER_STATUS_OPTIONS.map(option => (
                <Option key={option.value} value={option.value}>
                  {option.label}
                </Option>
              ))}
            </Select>
          </div>
        </Col>

        <Col xs={24} sm={12} md={6}>
          <div>
            <label style={{ display: 'block', marginBottom: 4, fontWeight: 500 }}>
              角色
            </label>
            <Select
              mode="multiple"
              placeholder="选择角色"
              value={filters.role}
              onChange={handleRoleChange}
              style={{ width: '100%' }}
              disabled={loading}
            >
              {USER_ROLE_OPTIONS.map(option => (
                <Option key={option.value} value={option.value}>
                  {option.label}
                </Option>
              ))}
            </Select>
          </div>
        </Col>

        <Col xs={24} sm={12} md={6}>
          <div>
            <label style={{ display: 'block', marginBottom: 4, fontWeight: 500 }}>
              部门
            </label>
            <Select
              mode="multiple"
              placeholder="选择部门"
              value={filters.department}
              onChange={handleDepartmentChange}
              style={{ width: '100%' }}
              disabled={loading}
            >
              {DEPARTMENT_OPTIONS.map(department => (
                <Option key={department} value={department}>
                  {department}
                </Option>
              ))}
            </Select>
          </div>
        </Col>

        <Col xs={24} md={6}>
          <div>
            <label style={{ display: 'block', marginBottom: 4, fontWeight: 500 }}>
              搜索
            </label>
            <Search
              placeholder="搜索用户名、显示名称、邮箱..."
              value={filters.search}
              onSearch={handleSearchChange}
              onChange={(e) => {
                if (!e.target.value) {
                  handleSearchChange('');
                }
              }}
              style={{ width: '100%' }}
              disabled={loading}
              enterButton={<SearchOutlined />}
            />
          </div>
        </Col>

        <Col xs={24}>
          <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
            <Button
              icon={<ClearOutlined />}
              onClick={handleClearFilters}
              disabled={loading}
            >
              清空筛选
            </Button>
          </div>
        </Col>
      </Row>
    </Card>
  );
};

export default UserFilters; 